<template>
    <div class="body">
        <div class="head">
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>内容管理</el-breadcrumb-item>
            <el-breadcrumb-item>文案管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button type="warning" size="small" @click="AddDocDialogVisible=true">+添加文案</el-button>
        </div>
        <div class="leftList">
            <h3>文案分类列表</h3>
            <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane label="活动文案">
                    <contents
                        :headerData="headerData"
                        :total="total"
                        :tableData="tableData"
                        @CurrentChange="CurrentChange"
                        @SizeChange="SizeChange">
                            <template v-slot:menu="{index,row}" >
                                <div>
                                    <el-button @click="editDoc(row,index)" type="success" size="small">编辑</el-button>
                                    <el-button type="danger" size="small" @click="deleteDoc(index)">删除</el-button>
                                </div>
                            </template>
                </contents></el-tab-pane>
                <el-tab-pane label="系统通知">系统通知</el-tab-pane>
            </el-tabs>
        </div>
        <!-- 添加文案 -->
        <el-dialog title="添加文案" :visible.sync="AddDocDialogVisible" width="40%" >
            <el-form
                    :model="addDocForm"
                    ref="addDocForm"
                    :rules="addDocFormRules"
                    label-width="100px">
                <el-form-item label="所属分类" prop="category">
                    <el-input v-model="addDocForm.category"></el-input>
                </el-form-item>
                <el-form-item label="活动名称" prop="activity">
                    <el-input v-model="addDocForm.activity"></el-input>
                </el-form-item>
                <el-form-item label="文案简介" prop="Introduction">
                    <el-input v-model="addDocForm.Introduction"></el-input>
                </el-form-item>
                <el-form-item label="使用场景" prop="useScene">
                    <el-input v-model="addDocForm.useScene"></el-input>
                </el-form-item>
                <el-form-item>
                        <el-button @click="AddDocDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitFormAdd('addDocForm')">确 定</el-button>
                </el-form-item>
            </el-form>
           
        </el-dialog>
        <!-- 编辑文案 -->
        <el-dialog title="编辑文案" :visible.sync="editDocDialogVisible" width="40%" >
            <el-form
                    :model="editDocForm"
                    ref="editDocForm"
                    :rules="editDocFormRules"
                    label-width="100px">
                    
                <el-form-item label="活动名称" prop="activity">
                    <el-input v-model="editDocForm.activity"></el-input>
                </el-form-item>
                <el-form-item label="文案简介" prop="Introduction">
                    <el-input v-model="editDocForm.Introduction"></el-input>
                </el-form-item>
                <el-form-item>
                        <el-button @click="editDocDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitFormEdit('editDocForm')">确 定</el-button>
                </el-form-item>
            </el-form>
            
        
        </el-dialog>
    </div>
</template>
<script>
import contents from "@/components/contents"
import {contentTableListMock,contenttableMyList,deleteTableList} from "@/api/contentMock";
export default {
    name:"documentManagement",
    data() {
        return {
                AddDocDialogVisible: false,
                addDocForm: {
                    id:"",
                    category:"",
                    activity:"",
                    Introduction:"",
                    useScene:"",
                    state:""
                },
                addDocFormRules: {
                    activity: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'}
                    ],
                    
                },
                editDocForm: {
                    id:"",
                    category:"",
                    activity:"",
                    Introduction:"",
                    useScene:"",
                    state:""
                },
                editDocDialogVisible: false,
                resetSetRightDialog:false,
                setRightDialogVisible:false,
                editDocFormRules: {
                    activity: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'}
                    ],
                    
                },
                editIndex:"",
            tabPosition:"left",
            tableData: [],
            headerData:[

                {
                    prop:"category", 
                    label:"所属分类",
                    width:"100px"
                },
                
                 {
                    prop:"activity", 
                    label:"活动名称",
                    width:"150px"
                },
                {
                    prop:"Introduction", 
                    label:"文案简介",
                    width:"150px"
                },
                {
                    prop:"useScene",
                    label:"使用场景",
                    width:"100px"
                },
                {
                    prop:"state",
                    label:"状态",
                    width:"100px"
                }
            ], 
            pagesize:"10",
            pagenum:"1",
            total:0,
        }
    },
    components:{
        contents
    },
    mounted(){
        let _self = this;
        _self.dataInit()
        
    },
    methods:{
        submitFormAdd(addDoc){
            let _self = this;
            this.$refs[addDoc].validate((valid) => {
                    if (valid) {
                         _self.tableData.unshift(_self.addDocForm)
                        _self.AddDocDialogVisible=false
                         
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                    _self.addDocForm={
                            id:"",
                            category:"",
                            activity:"",
                            Introduction:"",
                            useScene:"",
                            state:""
                        };
                });
        },
        editDoc(row,index){
            let _self = this;
            _self.editIndex = index;
                _self.editDocDialogVisible=true;
                _self.editId=row.id;
                _self.editDocForm=JSON.parse(JSON.stringify(row))
        },
         submitFormEdit(editDoc){
                let _self =this;
                 this.$refs[editDoc].validate((valid) => {
                    if (valid) {
                         _self.$set(_self.tableData,_self.editIndex,_self.editDocForm)
                       _self.editDocDialogVisible=false;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        
        deleteDoc(index){
            let _self = this;
            deleteTableList().then(res=>{
            console.log(res)
            this.$message({
          message: '删除成功',
          type: 'success'
        });
         _self.tableData.splice(index,1);
            })
        },
        dataInit(){
            let _self = this;
            let data = {
                pagenum:_self.pagenum,
                pagesize:_self.pagesize
            }
            contentTableListMock().then(res=>{
                console.log(res)
                _self.tableData = res.data.list;
                 _self.total = res.data.list.length;
                contenttableMyList(data).then(ress=>{
                console.log(ress)
                _self.tableData= ress.data.user;
                _self.total= ress.data.total;
            })
            })
            
            
        },
        CurrentChange(val){
            let _self = this;
            _self.pagenum = val;
            _self.dataInit()
        },
        SizeChange(val){
            console.log(val)
            let _self = this;
            _self.pagesize = val;
            _self.dataInit()
        },
        
    }
}
</script>
<style scoped>
.body{
    padding: 10px 20px;
}
.el-breadcrumb{
    margin: 10px 0;
}
.leftList{
    height: 100%;
    margin: 10px 10px 30px 0;
    
}
.el-tabs{
    height: 390px !important;
}
.tablePadding{
    padding: 0;
}
h3{
    width: 100%;
    background: #53BCCD;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
}
</style>